<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style type="text/css">
        .deptName{
            display: block;
            width: 100px;
        }

    </style>
</head>

<body>
    <div id="app">
        userName:<input name="userName" id="userName" v-model="userName"><br/>
        password:<input name="password" id="password" v-model="password"><br/>
        <input type="submit" value="增加数据" @click="insertData()">
        <input type="submit" value="查询数据" @click="fun()">
        <input type="submit" value="删除数据" @click="deletedata()">
        <input type="submit" value="编辑数据">
        <input type="submit" value="所有数据" @click="fenye()">
        <br/>
        <br/>
        <input name="deptName" id="deptName" v-model="deptName"/>
        <input type="submit" value="增加部门" @click="insertDept()">
        <input type="submit" value="删除部门" @click="dropDept()"/>
        <br/>


        所属部门：<select name="deptName" v-model="deptId" class="deptName">
            <option v-for="(dept,index) in deptResult" :key="index" :value="dept.id">{{dept.deptName}}</option>
        </select>

       员工姓名： <input type="text" v-model="empName"/><br/>
        性别：<input type="radio" name="gender" value="0" v-model="gender"/>女
        <input type="radio" name="gender" value="1" v-model="gender"/>男

        <br/>
        邮箱：<input type="email" v-model="email"/><br/>

        <input type="submit" @click="insertEmp" value="新增"/>

        <input type="submit" value="查询所有" @click="selectEmpAll"/>

        <div>
           <table border="1" cellspacing="0">
               <tr>
                   <td v-for="(value,key) in empResult[0]">{{key}}</td>
               </tr>

               <tr v-for="(emp,index) in empResult" :key="index">
                    <td v-for="value in emp">{{value|sexFilter}}</td>
               </tr>

           </table>
        </div>

        <input type="number" v-model="start"/>
        <input type="number" v-model="limit"/>
        <input type="submit" value="下一页" @click="next"/>

    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                message:'hello vue.js.',
                userName:'',
                password:'',
                deptName:'',
                deptResult:[],
                deptId:null,
                empName:'',
                gender:'0',
                email:'',
                empResult:[],
                start:null,
                limit:null
            }
        },
        mounted(){
           this.getData('/selectAll','',(res)=>{
            this.deptResult=JSON.parse(res);
            console.log(typeof (this.deptResult));
            console.log(this.deptResult);
           });
            this.selectEmpAll();
        },

        methods:{
            getData(url,data,callback) {
                var xmlhttp;
                if(window.XMLHttpRequest)
                {
                    xmlhttp=new XMLHttpRequest();

                }else
                {
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                };
                xmlhttp.open("POST",url,true);
                xmlhttp.setRequestHeader("Content-type","application/json");
                xmlhttp.send(JSON.stringify(data));
                xmlhttp.onreadystatechange=function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        alert('成功');
                        callback(xmlhttp.responseText);
                    }
                };
            },

            fun() {
                // alert(1);
                var data={
                    "userName":this.userName
                };
                this.getData('/selectRes',data,(res)=>{
                    console.log('成功');
                });
            },

            insertData() {
                var data={
                    "userName":this.userName,
                    "password":this.password
                };
                this.getData('/insertUser',data,(res)=>{
                    console.log(res)
                });
            },

            deletedata() {
                var data={
                    "userName":this.userName,
                };
                this.getData('/dropUser',data,(res)=>{
                    console.log(res);
                });
            },

            insertDept() {
                var data={
                    "deptName":this.deptName,
                };
                this.getData('/insertDept',data,(res)=>{
                    console.log(res);
                });
            },

            dropDept() {
                var data=
                    {
                        "deptName":this.deptName,
                    };
                this.getData('/dropDept',data,(res)=>{
                    console.log(res);
                });
            },
            insertEmp(){
                var data={
                    dId:parseInt(this.deptId),
                    empName:this.empName,
                    email:this.email,
                    gender:this.gender
                };
                this.getData('/insertEmp',data,(res)=>{
                    console.log(res);
                })
            },

            selectEmpAll(){
                var data={};
                this.getData('/selectEmpAll',data,(res)=>{
                    console.log(res);
                    this.empResult=JSON.parse(res);
                })
            },
            next(){
                var data={
                    start: parseInt(this.start),
                    limit: parseInt(this.limit)
                };
                this.getData('/selelctLimit',data,(res)=>{
                    console.log(res);
                })

            }




        },
        filters:{
            sexFilter(val){
                switch (val) {
                    case '0':
                        return '女';
                        break;
                    case '1':
                        return '男';
                        break;
                    default:
                        return val;
                        break;
                }
            }
        }
    });


</script>

</html>